<template>
	<view>
		<u-navbar placeholder fixed autoBack title="选择人员"></u-navbar>

		<view class="d-p-l-30 d-p-r-30 d-flex d-font-28 d-text-center d-sel" style="color: #5D6672;">
			<view class="d-flex-1 d-flex d-row-center u-border-right">
				<text class="d-m-r-10">所属单位</text>
				<u-icon name="arrow-down-fill" size="28rpx" color="#DFDFDF"></u-icon>
			</view>
			<view class="d-flex-1 d-flex d-row-center">
				<text class="d-m-r-10">所属班组</text>
				<u-icon name="arrow-down-fill" size="28rpx" color="#DFDFDF"></u-icon>
			</view>
		</view>
		<u-gap height="68rpx" bgColor="#FBFCFC"></u-gap>

		<view class="d-p-30">
			<view class="card d-p-30 d-m-b-30" v-for="(item, index) in 10" :key="index">
				<view class="d-flex" style="color: #5D6672;">
					<view class="d-font-24" style="flex: 3;">
						<text style="">姓名</text>
						<text class="d-m-l-20" style="color: #162233;">某某</text>
					</view>
					<view class="d-font-24" style="flex: 3;">
						<text style="">工种</text>
						<text class="d-m-l-20" style="color: #162233;">木工</text>
					</view>
				</view>
				<view class="d-flex d-m-t-10" style="color: #5D6672;">
					<view class="d-font-24" style="flex: 3;">
						<text style="">所属单位</text>
						<text class="d-m-l-20" style="color: #162233;">某某</text>
					</view>
					<view class="d-font-24" style="flex: 3;">
						<text style="">联系电话</text>
						<text class="d-m-l-20" style="color: #162233;">15334527675</text>
					</view>
				</view>
				<view class="d-flex d-m-t-10" style="color: #5D6672;">
					<view class="d-font-24" style="flex: 3;">
						<text style="">证件号码</text>
						<text class="d-m-l-20" style="color: #162233;">15334527675</text>
					</view>
				</view>
				<view class="d-m-t-10 d-flex d-row-right">
					<view class="d-m-l-30">
						<u-button
							text="选择"
							shape="circle"
							size="mini"
							:customStyle="{
								color: '#21A5F3',
								borderColor: '#21A5F3'
							}"
							@click="back"
						></u-button>
					</view>
					<view class="d-m-l-30"><u-button text="删除" shape="circle" size="mini"></u-button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getStaff } from '../../../common/api.js';
export default {
	data() {
		return {
			pageNum: 1,
			pageSize: 20,
			pageLast: 1,
			list: []
		};
	},
	onLoad() {
		
		this.init();
	},
	onReachBottom() {
		if (this.pageNum < this.pageLast) {
			++this.pageNum;
			this.getStaff().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	methods: {
		init() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.pageNum = 1;
			this.getStaff().then(e => {
				this.list = e.data;
				this.pageLast = Math.ceil(e.total / this.pageSize);
				uni.hideLoading();
			});
		},
		getStaff() {
			return getStaff({
				params: {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					// bzid: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
					// rybh: this.$user.ssgcxx[this.$appIndex].rybh // 人员id
				}
			});
		},
		back() {
			uni.$u.route({
				type: 'back'
			});
		}
	}
};
</script>

<style lang="scss">
.d-sel {
	position: fixed;
	left: 0;
	right: 0;
	background-color: #ffffff;
	z-index: 999;
	& > view {
		height: 68rpx;
	}
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	.u-border-right {
		border-color: #eeeeee !important;
	}
}
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;
}
page {
	background-color: #fbfcfc;
}
</style>
